<template>
  <div class="login">
    <div class="top-bar">
      <div class="logo">
        <!--<img src="../../static/image/login-logo.png" alt="">-->
        <span class="logo-text">数据查询系统</span>
      </div>
    </div>
    <div class="input-block">
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="loginForm.password" @keyup.enter.native="submitForm('loginForm')"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        </div>
      </el-form>
    </div>
    <div class="com-info">
      <!--云立方 版权所有 Copyrights 2017-2018-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data: function(){
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            {min:2,max:20,message:'用户名只能由2-20个字符组成'}
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {min:4,max:20,message:'密码只能由4-20个字符组成'}
          ]
        },
      }
    },
    methods:{
      submitForm(form){
        this.$refs[form].validate((res) => {
          if(res){
            let loading = this.$loading({
                  lock: true,
                  text: '正在登录...',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                }),
                suc = () =>{
                  this.$message.success('登录成功');
                  this.$router.push('/home');
                },
                err = () =>{},
                always = () => {loading.close()};

            this.saLogin(this.loginForm.username,this.loginForm.password,suc,err,this.$message.error,always);

          }else{
            this.$message.error('账号或密码不复合要求...');
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../static/style/public';
  .login{
    display: flex;
    flex-direction: column;
    align-items: center;

    width:100%;
    height:100%;
    background-color: #eee;
    text-align: center;
    .top-bar{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      width:100%;
      height:50%;
      background-color: $primaryColor;
      .logo{
        margin-bottom: 20px;
        img{
          width:381px;
          height:213px;
        }
        .logo-text{
          color:white;
          font-size:40px;
        }
      }
    }
    .input-block{
      padding:20px 40px 30px 40px;
      width:320px;
      background-color: #eee;
      border-radius: 5px;
      .title{
        margin:10px;
        font-size:25px;
        font-weight: 600;
      }
      .login-btn{
        width:100%;
        button{
          width:100%;
          background-color: $primaryColor;
        }
      }
      input{
        height:30px !important;
      }
    }
    .com-info{
      position:absolute;
      bottom:50px;
      left:0px;
      right:0px;
      color:black;

    }
  }
</style>
